<template>
  <div class="page-container">

    <el-tabs v-model="activeName">
      <el-tab-pane label="用户信息" name="0"></el-tab-pane>
    </el-tabs>
    <el-col :span="20">
      <div class="list">
        <div class="item">
          <span>用户id:</span>
          <span class="line">{{ userInfo.userId }}</span>
        </div>
        <div class="item">
          <span>手机号:</span>
          <span class="line">{{ userInfo.phone }}</span>
        </div>

        <div class="item">
          <span>姓名:</span>
          <span class="line">{{ userInfo.userName }}</span>
        </div>

        <div class="item">
          <span>邮箱:</span>
          <span class="line">{{ userInfo.email }}</span>
        </div>
        <div class="item"></div>
      </div>
    </el-col>

    <el-tabs v-model="activeName">
      <el-tab-pane label="提现记录" name="0"></el-tab-pane>
    </el-tabs>
    <el-table :data="record">
      <el-table-column label="提现金额" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请状态" align="center">

        <template slot-scope="scope">
          <span>{{ applyStatus[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center">

        <template slot-scope="scope">
          <span>{{ scope.row.applyTime | timestampToDate }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination hide-on-single-page :total="total" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize"
      @pagination="getList" />
    <el-card style="margin-top: 4px;" class="footer-card">
      <div class="app-footer" style="text-align:center">
        <el-button align="center" @click="$router.push('/finance/withdrawal/index')" type="normal">关闭</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { timestampToDate } from '@/utils/time'
import { listByMe } from '@/api/finance/withdrawal'
import { APPLY_WITHDRAW_LABEL } from '@/constant/const'
export default {
  data() {
    return {
      activeName:0,
      record: [],
      userInfo: {},
      queryParam: {
        pageNum: 1,
        pageSize: 20,
        id: undefined
      },
      applyStatus: APPLY_WITHDRAW_LABEL,
      total: 0
    }
  },

  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('withdrawalRow'))
    this.queryParam.id = this.userInfo.userId
  },

  methods: {
    getList() {
      listByMe(this.queryParam, this)
    }
  },

  mounted() {
    listByMe(this.queryParam, this)
  },

  filters: {
    timestampToDate
  }
}
</script>

<style scoped>
@import url('../../../assets/styles/grid.css');


.page-container {
  width: 100%;
  max-height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.footer-card {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
